﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <link rel="stylesheet" href="Content/bootstrap.min.css"/>
    <link rel="stylesheet" href="Content/bootstrap-theme.min.css"/>

    <script>
        var DBSystem = DBSystem || {};
    </script>
    
    <script src="Scripts/jquery-2.1.0.min.js"></script>
    <script src="Scripts/jsrender.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/config.js"></script>
    <script src="Scripts/productos.js"></script>

</head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">Buscar Productos</div>
            <div class="panel-body">
                 <div class="form-inline">
                    <label>Criterio:</label>
                    <input type="text" id="txtCriterio" class="form-control"/>
                    <button id="btnBuscar" class="btn btn-success">Buscar</button>
                     <button id="btnNuevo" class="btn btn-danger">Nuevo Producto</button>
            </div>
            </div>
        </div>

        <div id="detalleProducto" class="panel panel-primary" style="display: none; width: 30%;margin: auto;">
            <div class="panel-heading">Detalles del Producto</div>
            <div class="panel-body">
                <div class="form-horizontal" role="form" style="padding: 10px;">
                    <div class="form-group">
                        <label>ID:</label>
                        <input type="text" id="txtId" class="form-control" disabled="disabled"/>
                    </div>
                    <div class="form-group">
                        <label>Codigo:</label>
                        <input type="text" id="txtCodigo" class="form-control" placeholder="codigo"/>
                    </div>
                    <div class="form-group">
                        <label>Descripcion:</label>
                        <input type="text" id="txtDescripcion" class="form-control" placeholder="descripcion"/>
                    </div>
                    <div class="form-group">
                        <label>Categoria</label>
                        <input type="number" id="txtCategoria" class="form-control"/>
                        <select id="cbCategorias" class="form-control">
                            <option value="{{>Id}}">{{>Descripcion}}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Precio</label>
                        <input type="number" id="txtPrecio" step="0.1" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label>Stock</label>
                        <input type="number" id="txtStock" step="0.1" class="form-control"/>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <button id="btnGuardar" class="btn btn-success" data-opc="none">
                    <span class="glyphicon glyphicon-save"></span>Guardar
                </button>
                <button id="btnCancelar" class="btn btn-danger" data-opc="none">Cancelar</button>
            </div>
        </div>
        <div style="padding: 15px;">
            <table id="tblProductos" class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Codigo</th>
                        <th>Descripcion</th>
                        <th>Categoria</th>
                        <th>Precio</th>
                        <th>Stock</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{>Id}}</td>
                        <td>{{>Codigo}}</td>
                        <td>{{>Descripcion}}</td>
                        <td>{{>Categoria.descripcion}}</td>
                        <td>{{>Precio}}</td>
                        <td>{{>Stock}}</td>
                        <td>
                            <a data-id="{{>Id}}" class="editar" >Editar</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <script id="rowProductoTemplate" type="application/x-jsrender">
            <tr>
                <td>{{>Id}}</td>
                <td>{{>Codigo}}</td>
                <td>{{>Descripcion}}</td>
                <td>{{>Categoria.descripcion}}</td>
                <td>{{>Precio}}</td>
                <td>{{>Stock}}</td>
                <td>
                    <a href="" data-id="{{>Id}}" class="editar">Editar</a> |
                    <a href="" data-id="{{>Id}}" data-desc="{{>Codigo}} - {{>Descripcion}}" class="delete">Quitar</a>
                </td>
           </tr>
        </script>
            <script id="categoriaTemplate" type="application/x-jsrender">
                <option value="{{>id}}">{{>descripcion}}</option>
            </script>
        </div>
    </body>
</html>
